<template>
  <div>
    <!-- 已经封装过 comment 组件
        可以直接复用,只需要通过 ajax 获取评论数组
    然后渲染组件即可-->
    <headerMiddle title="更多跟帖" />
    <comment :commentItem="item" v-for="(item,index) in comments" :key="index" @reply="reply" />
    <postDetailFooter
      :post="post"
      :isActive="replyActive"
      :replyObj="replyObj"
      @newComment="getComments"
    />
  </div>
</template>

<script>
import comment from "../components/comment";
import headerMiddle from "../components/headerMiddle";
import postDetailFooter from "../components/postDetailFooter";
export default {
  components: {
    comment,
    headerMiddle,
    postDetailFooter
  },
  data() {
    return {
      postId: this.$route.params.id,
      comments: [],
      replyActive: 0,
      post: {},
      replyObj: {}
      // 本来这里没有 post 数据,但是页脚组件需要,所以我们需要先获取到 post 的资料
    };
  },
  mounted() {
    // 获取新闻详情
    this.$axios({
      url: "/post/" + this.postId,
      method: "get"
    }).then(res => {
      const { data } = res.data;
      this.post = data;
    });
    this.getComments();
  },
  methods: {
    reply(replyObj) {
      // 我们接受子组件的自定义触发事件,然后需要弹起回复框
      // 这里是我点击了回复了那个id
      this.replyObj = replyObj;
      this.replyActive += 1;
    },
    getComments() {
      // 一进来就要根据 postId 获取评论数据
      this.$axios({
        url: "/post_comment/" + this.postId,
        method: "get"
      }).then(res => {
        const { data } = res.data;
        // 这里 data 就是我们想要获取的评论数组,每一个元素都是一条评论
        // 要先存储到页面组件的 data 当中
        this.comments = data;
      });
    }
  }
};
</script>

<style>
</style>